<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>发布公告</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <style type="text/css">
        .layui-table-cell {
            height: 100%;
            max-width: 100%;
        }
    </style>
</head>
<body>

<div class='layui-col-md10'>
    <form class="layui-form">

        <button type="button" class="layui-btn" id="addNoticeBtn">
            <i class="layui-icon">&#xe608;</i> 发布公告
        </button>

    </form>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
        <legend>CloudBox云盘-公告时间线</legend>
    </fieldset>
    <ul class="layui-timeline" id="notice">



    </ul>
</div>




<!-- 添加页面开始 -->
<form class="layui-form" id="addNoticeForm" lay-filter="addNoticeForm" style="display: none;padding: 20px 55px 0px 0px">
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">公告内容</label>
        <div class="layui-input-block">
            <textarea name="content" placeholder="请输入公告内容" class="layui-textarea" lay-verify="required" ></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">公告图片</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="amendUpload">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
            <input type="hidden" name="url" value="" id="amendUrl">
            <img src='' height='50px' id="amendNotice"/>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit  lay-filter="addNoticeSubmit">立即发布</button>
            <button type="button" id="closeNoticeAdd" class="layui-btn layui-btn-primary">关闭</button>
        </div>
    </div>
</form>
<!-- 添加页面结束 -->



<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">



    layui.use(['form','layer','upload'],function () {

        var form = layui.form;
        var layer = layui.layer;
        var upload = layui.upload;

        noticeList();

        function noticeList () {
            $("#notice").html("");
            /**
             * 公告列表
             **/
            $.ajax({
                url:'cloud-message/list',
                type:'get',
                dataType:'json',
                success:function (result) {
                    if (result.code == 200) {
                        $.each(result.data, function (index, item) {
                            $("#notice").append("<li class=\"layui-timeline-item\">\n" +
                                "    <i class=\"layui-icon layui-timeline-axis\">&#xe63f;</i>\n" +
                                "    <div class=\"layui-timeline-content layui-text\">\n" +
                                "      <h3 class=\"layui-timeline-title\">"+item.messageTime+"</h3>\n" +
                                "      <p>"+item.messageContent+"</p><br>\n" +
                                    "<img src='"+ item.messageUrl +"' width='200'/>" +
                                "    </div>\n" +
                                "  </li><br/>");
                        })
                        $("#notice").append("<li class=\"layui-timeline-item\">\n" +
                            "        <i class=\"layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis\"></i>\n" +
                            "        <div class=\"layui-timeline-content layui-text\">\n" +
                            "            <div class=\"layui-timeline-title\">过去</div>\n" +
                            "            <p>\n" +
                            "                CloudBox网上云盘4月1日正式上线啦！(*^▽^*)\n" +
                            "            </p><br>\n" +
                            "            <img src='http://gaoyiguan.cn/cloud/system/logo.png' width='200'/><br>" +
                            "        </div>\n" +
                            "    </li>");
                    }
                }
            });

        }


        /**
         * 渲染页面的图片上传
         * */
        upload.render({
            elem:'#amendUpload'
            ,url:'cloud-message/upload'
            ,done: function(result){
                if(result.code==200){
                    $("#amendNotice").prop("src",result.data);
                    $("#amendUrl").val(result.data);
                }
            }
        });


        /**
         * 点击添加按钮弹出层展示添加页面
         * */
        $("#addNoticeBtn").click(function () {
            layer.open({
                type:1,
                area:['760px'],
                title:['发布新公告','font-size:18px;color:orange;'],
                content:$("#addNoticeForm"),
            });
        });
        /**
         * 监听添加用户页面的 发布新公告 按钮
         * */
        form.on("submit(addNoticeSubmit)",function (obj) {
            layer.confirm("你确定要发布新公告吗？",{icon:'3',title:'提示'},function () {
                $.ajax({
                    url:'cloud-message/insert',
                    data:obj.field,
                    type:"post",
                    dataType:"json",
                    success:function (data) {
                        if(data.code==200){
                            obj.form.reset();
                            layer.closeAll();
                            layer.msg("发布新公告成功！",{icon:'1',title:'提示'});
                            noticeList();
                        }
                    }
                });
            });
            return false;
        });


        /**
         * 各个页面的一些关闭按钮
         * */
        $("#closeNoticeAdd").click(function () {
            layer.closeAll();
        });



    });
</script>


</body>
</html>